<template>
  <div class="pacture">
    <div class="top_box">
      <el-row class="top_box">
        <el-col
          :span="4"
          style="padding: 20px"
        >
          <el-card
            class="box-card"
            style="padding: 5px"
          >
            <p class="p_style">{{ Code }}</p>
            <p class="p_style">{{ users }}</p>
            <p class="p_style">XXX医院</p>
          </el-card>
        </el-col>
        <el-col
          :span="20"
          style="padding: 20px"
          class="card_time"
        >
          <el-card
            class="box-card"
            style="overflow: auto"
          >
            <ul
              class="time-horizontal"
              v-if="true"
              :style="isUl_width"
            >
              <li
                v-for="item in top_time"
                :key="item.id"
              >
                <p>{{ item.name }}</p>
                <b></b>{{ item.time }}
              </li>
            </ul>
            <el-steps
              :active="7"
              align-center
              finish-status="process"
              v-if="false"
            >
              <el-step
                title="心脏大血管外科门诊"
                description="2021-11-12"
                icon="el-icon-message-solid"
              ></el-step>
              <el-step
                title="急诊科"
                description="2021-11-13"
                icon="el-icon-message-solid"
              ></el-step>
              <el-step
                title="胸外科门诊"
                description="2021-11-14"
                icon="el-icon-message-solid"
              ></el-step>
              <el-step
                title="心脏大血管外科门诊"
                description="2021-11-14"
                icon="el-icon-message-solid"
              ></el-step>
              <el-step
                title="急诊科"
                description="2021-11-15"
                icon="el-icon-message-solid"
              ></el-step>
              <el-step
                title="心脏大血管外科门诊"
                description="2021-11-16"
                icon="el-icon-message-solid"
              ></el-step>
            </el-steps>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div
      class="bottom_box"
      style="padding: 20px"
    >
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="诊断信息"
          name="1"
        >
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <ul
                  class="time-horizontal"
                  v-if="true"
                  :style="isUl_width"
                >
                  <li
                    v-for="item in props.row.time"
                    :key="item.id"
                    style="margin-top: 0px; margin-bottom: 0px"
                  >
                    <p>{{ item.name }}</p>
                    <p>{{ item.name2 }}</p>
                    <p>{{ item.name3 }}</p>
                    <b></b>{{ item.time }}
                  </li>
                </ul>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
            > </el-table-column>
            <el-table-column
              prop="name"
              label="门（急）诊号"
            >
            </el-table-column>
            <el-table-column
              prop="address1"
              label="过敏史"
            > </el-table-column>
            <el-table-column
              prop="address2"
              label="主诉"
            > </el-table-column>
            <el-table-column
              prop="address3"
              label="现病史"
            > </el-table-column>
            <el-table-column
              prop="address4"
              label="既往史"
            > </el-table-column>
            <el-table-column
              prop="address5"
              label="西医诊断名称"
            >
            </el-table-column>
            <el-table-column
              prop="address6"
              label="中医病名名称"
            >
            </el-table-column>
            <el-table-column
              prop="address7"
              label="医嘱类型"
            >
            </el-table-column>
            <el-table-column
              prop="address8"
              label="医嘱内容"
            >
            </el-table-column>
            <el-table-column
              prop="address9"
              label="医嘱备注"
            >
            </el-table-column>
            <el-table-column
              prop="address10"
              label="医嘱状态"
            >
            </el-table-column>
            <el-table-column
              prop="address11"
              label="医师签名"
            >
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          label="医嘱信息"
          name="2"
        >
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <ul
                  class="time-horizontal"
                  v-if="true"
                  :style="isUl_width"
                >
                  <li
                    v-for="item in props.row.time"
                    :key="item.id"
                    style="margin-top: 0px; margin-bottom: 0px"
                  >
                    <p>{{ item.name }}</p>
                    <p>{{ item.name2 }}</p>
                    <p>{{ item.name3 }}</p>
                    <b></b>{{ item.time }}
                  </li>
                </ul>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
            > </el-table-column>
            <el-table-column
              prop="name"
              label="门（急）诊号"
            >
            </el-table-column>
            <el-table-column
              prop="address1"
              label="过敏史"
            > </el-table-column>
            <el-table-column
              prop="address2"
              label="主诉"
            > </el-table-column>
            <el-table-column
              prop="address3"
              label="现病史"
            > </el-table-column>
            <el-table-column
              prop="address4"
              label="既往史"
            > </el-table-column>
            <el-table-column
              prop="address5"
              label="西医诊断名称"
            >
            </el-table-column>
            <el-table-column
              prop="address6"
              label="中医病名名称"
            >
            </el-table-column>
            <el-table-column
              prop="address7"
              label="医嘱类型"
            >
            </el-table-column>
            <el-table-column
              prop="address8"
              label="医嘱内容"
            >
            </el-table-column>
            <el-table-column
              prop="address9"
              label="医嘱备注"
            >
            </el-table-column>
            <el-table-column
              prop="address10"
              label="医嘱状态"
            >
            </el-table-column>
            <el-table-column
              prop="address11"
              label="医师签名"
            >
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          label="用药清单"
          name="3"
        >
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
            > </el-table-column>
            <el-table-column
              prop="date"
              label="日期"
            > </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
            > </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
            > </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          label="检查结果"
          name="4"
        >
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <ul
                  class="time-horizontal"
                  v-if="true"
                  :style="isUl_width"
                >
                  <li
                    v-for="item in props.row.time"
                    :key="item.id"
                    style="margin-top: 0px; margin-bottom: 0px"
                  >
                    <p>{{ item.name }}</p>
                    <p>{{ item.name2 }}</p>
                    <p>{{ item.name3 }}</p>
                    <b></b>{{ item.time }}
                  </li>
                </ul>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
            > </el-table-column>
            <el-table-column
              prop="name"
              label="门（急）诊号"
            >
            </el-table-column>
            <el-table-column
              prop="address1"
              label="过敏史"
            > </el-table-column>
            <el-table-column
              prop="address2"
              label="主诉"
            > </el-table-column>
            <el-table-column
              prop="address3"
              label="现病史"
            > </el-table-column>
            <el-table-column
              prop="address4"
              label="既往史"
            > </el-table-column>
            <el-table-column
              prop="address5"
              label="西医诊断名称"
            >
            </el-table-column>
            <el-table-column
              prop="address6"
              label="中医病名名称"
            >
            </el-table-column>
            <el-table-column
              prop="address7"
              label="医嘱类型"
            >
            </el-table-column>
            <el-table-column
              prop="address8"
              label="医嘱内容"
            >
            </el-table-column>
            <el-table-column
              prop="address9"
              label="医嘱备注"
            >
            </el-table-column>
            <el-table-column
              prop="address10"
              label="医嘱状态"
            >
            </el-table-column>
            <el-table-column
              prop="address11"
              label="医师签名"
            >
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          label="检验结果"
          name="5"
        >
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <ul
                  class="time-horizontal"
                  v-if="true"
                  :style="isUl_width"
                >
                  <li
                    v-for="item in props.row.time"
                    :key="item.id"
                    style="margin-top: 0px; margin-bottom: 0px"
                  >
                    <p>{{ item.name }}</p>
                    <p>{{ item.name2 }}</p>
                    <p>{{ item.name3 }}</p>
                    <b></b>{{ item.time }}
                  </li>
                </ul>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
            > </el-table-column>
            <el-table-column
              prop="name"
              label="门（急）诊号"
            >
            </el-table-column>
            <el-table-column
              prop="address1"
              label="过敏史"
            > </el-table-column>
            <el-table-column
              prop="address2"
              label="主诉"
            > </el-table-column>
            <el-table-column
              prop="address3"
              label="现病史"
            > </el-table-column>
            <el-table-column
              prop="address4"
              label="既往史"
            > </el-table-column>
            <el-table-column
              prop="address5"
              label="西医诊断名称"
            >
            </el-table-column>
            <el-table-column
              prop="address6"
              label="中医病名名称"
            >
            </el-table-column>
            <el-table-column
              prop="address7"
              label="医嘱类型"
            >
            </el-table-column>
            <el-table-column
              prop="address8"
              label="医嘱内容"
            >
            </el-table-column>
            <el-table-column
              prop="address9"
              label="医嘱备注"
            >
            </el-table-column>
            <el-table-column
              prop="address10"
              label="医嘱状态"
            >
            </el-table-column>
            <el-table-column
              prop="address11"
              label="医师签名"
            >
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          label="手术信息"
          name="6"
        >
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
            > </el-table-column>
            <el-table-column
              prop="date"
              label="日期"
            > </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
            > </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
            > </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          label="输血记录"
          name="7"
        >
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
            > </el-table-column>
            <el-table-column
              prop="date"
              label="日期"
            > </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
            > </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
            > </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          label="费用明细"
          name="8"
        >
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
            > </el-table-column>
            <el-table-column
              prop="date"
              label="日期"
            > </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
            > </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
            > </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      users: "",
      Code: "",
      HospitalId: "",
      endTime: "",
      HospitalName: "",
      activeName: "1",
      top_data: [], //上方时间线数据
      tableData: [
        {
          date: "2016-05-02",
          name: "M001",
          address1: "无过敏史",
          address2: "患者胸口疼痛",
          address3: "无",
          address4: "无",
          address5: "胸闷",
          address6: "",
          address7: "",
          address8: "",
          address9: "",
          address10: "已取消",
          address11: "赵桂花",
          time: [
            {
              name: "科室1",
              name2: "唐贵斌",
              name3: "开立医嘱",
              time: "2021-11-12 11:11:30",
              id: 1,
            },
            {
              name: "",
              name2: "韩文清",
              name3: "审核医嘱",
              time: "2021-11-12 11:20:45",
              id: 2,
            },
            {
              name: "科室2",
              name2: "刘旭明",
              name3: "执行医嘱",
              time: "2021-11-13 11:40:00",
              id: 3,
            },
            {
              name: "诊室3",
              name2: "唐真真",
              name3: "取消医嘱",
              time: "22021-11-15 12:00:00",
              id: 4,
            },
          ],
        },
        {
          date: "2016-05-02",
          name: "M002",
          address1: "无过敏史",
          address2: "患者胸口疼痛",
          address3: "无",
          address4: "无",
          address5: "胸闷",
          address6: "",
          address7: "",
          address8: "",
          address9: "",
          address10: "已取消",
          address11: "赵桂花",
          time: [
            {
              name: "科室1",
              name2: "唐贵斌",
              name3: "开立医嘱",
              time: "2021-11-12 11:11:30",
              id: 1,
            },
            {
              name: "",
              name2: "韩文清",
              name3: "审核医嘱",
              time: "2021-11-12 11:20:45",
              id: 2,
            },
            {
              name: "科室2",
              name2: "刘旭明",
              name3: "执行医嘱",
              time: "2021-11-13 11:40:00",
              id: 3,
            },
            {
              name: "诊室3",
              name2: "唐真真",
              name3: "取消医嘱",
              time: "22021-11-15 12:00:00",
              id: 4,
            },
          ],
        },
      ],
      top_time: [
        { name: "心脏大血管外科门诊", time: "2021-11-12" },
        { name: "急诊科", time: "2021-11-12" },
        { name: "胸外科门诊", time: "2021-11-12" },
        { name: "心脏大血管外科门诊", time: "2021-11-12" },
        { name: "急诊科", time: "2021-11-12" },
        { name: "心脏大血管外科门诊", time: "2021-11-12" },
        { name: "心脏大血管外科门诊", time: "2021-11-12" },
      ],
      isUl_width: "",
    };
  },
  methods: {
    get_topData () {
      this.$post(
        "/CDR/HologramTop?patientCode=" +
        this.Code +
        "&hospitalId=" +
        this.HospitalId +
        "&endTime=" +
        this.endTime +
        "&startTime=" +
        this.startTime
      ).then((res) => {
        if (res.code == 0) {
          this.top_data = res.data.RightList;
          this.HospitalName = res.data.HospitalName;
        }
      });
    },
    get_bottomData (className) {
      this.$post(
        "/CDR/PatientHologram?patientCode=" +
        this.Code +
        "&hospitalId=" +
        this.HospitalId +
        "&className=" +
        className +
        "&endTime=" +
        this.endTime +
        "&startTime=" +
        this.startTime
      ).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
        }
      });
    },
    handleClick (tab, event) {
      var index = tab.index;
      if (index == 0) {
        this.get_bottomData("OutpatientServiceMedicalRecord");
      }
      if (index == 1) {
        this.get_bottomData("InpatientOrders");
      }
      if (index == 2) {
        this.get_bottomData("WesternMedicinePrescription");
      }
      if (index == 3) {
        this.get_bottomData("InspectionRecord");
      }
      if (index == 4) {
        this.get_bottomData("ExaminationRecord");
      }
      if (index == 5) {
        this.get_bottomData("OperationRecord");
      }
      if (index == 6) {
        this.get_bottomData("BloodTransfusionRecord");
      }
      if (index == 7) {
        this.get_bottomData("MedicalExpenseRecord");
      }
    },
    dateFormat (val) {
      //时间过滤器
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times = d.getFullYear() + "-" + month + "-" + day;
        return times;
      }
    },
  },
  mounted () {
    // document.getElementById("2").focus();
    // alert(this.$route.query.idCard);
    this.users = this.$route.query.Name;
    this.Code = this.$route.query.Code;
    this.HospitalId = JSON.parse(localStorage.getItem("LoginInfor")).HospitalId;
    this.endTime = this.dateFormat(new Date());
    this.startTime = this.dateFormat(new Date() - 86400 * 7 * 1000);
    this.isUl_width = "width:" + this.top_time.length * 300 + "px;";
    this.get_topData();
    this.get_bottomData("OutpatientServiceMedicalRecord");
  },
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
  },
  filters: {
    dateFormat (val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
          d.getFullYear() +
          "-" +
          month +
          "-" +
          day +
          " " +
          hours +
          ":" +
          min +
          ":" +
          sec;
        return times;
      }
    },
  },
};
</script>
<style lang="scss">
.pacture {
  padding: 10px;
  .p_style {
    text-align: center;
    font-weight: 700;
  }
  .time-horizontal {
    list-style-type: none;
    border-top: 1px solid #707070;
    padding: 0px;
    margin: 0px;
    margin-top: 20px;
  }

  .time-horizontal li {
    float: left;
    position: relative;
    text-align: center;
    width: 300px;
    padding-top: 10px;
    margin-bottom: 10px;
    p {
      margin-top: -40px;
      margin-bottom: 18px;
    }
  }

  .time-horizontal li b:before {
    content: "";
    position: absolute;
    top: -7px;
    left: 47%;
    width: 12px;
    height: 12px;
    border: 2px solid #4c4c4c;
    border-radius: 8px;
    background: #4c4c4c;
  }

  .top_box .el-step__title {
    font-size: 16px;
    line-height: 38px;
    margin-top: -55px;
    margin-bottom: 26px;
  }
  .top_box .card_time .el-card__body {
    padding-top: 40px;
  }

  .el-table--enable-row-transition .el-table__body td.el-table__cell {
    overflow: auto;
  }
  .bottom_box .time-horizontal li {
    float: left;
    position: relative;
    text-align: center;
    width: 300px;
    padding-top: 10px;
    margin-bottom: 10px;
    p {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  ::-webkit-scrollbar {
    /*滚动条整体样式*/

    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/

    height: 8px;
  }
}
</style>
